<template>
	<custom-layout custom-class="custom-layout">
		<!-- 导航栏 -->
		<view class="navigation" :style="{ paddingTop: statusBarHeight + 'px' }">
			<text>我的</text>
		</view>
		
		<!-- 用户信息 -->
		<view class="user-info">
			<!-- <image class="cover" :src="userStore.userInfo.avatar" mode="aspectFill" /> -->
			<image class="avatar" :src="userStore.userInfo.avatar" mode="aspectFill" />
			<view class="name-info">
				<view class="name" v-if="userStore.userId">{{userStore.userInfo.nickname}}</view>
				<view class="name" v-if="!userStore.userId" @click="handleLogin">立即登录</view>
				<view class="id">
					ID {{userStore.userId}}
				</view>
			</view>
			
		</view>
		<!-- 佣金信息 -->
		<view class="commissionInfo" >
			<view class="item">
				<view class="number">{{userStore.userInfo?.commissionUserRespVO?.allMoney || 0}}</view>
				<view class="title">总佣金</view>
			</view>
			<view class="item">
				<view class="number">{{userStore.userInfo?.commissionUserRespVO?.withdrawnMoney || 0}}</view>
				<view class="title">已提现</view>
			</view>
			<view class="item">
				<view class="number">{{userStore.userInfo?.commissionUserRespVO?.notWithdrawnMoeny || 0}}</view>
				<view class="title">未提现</view>
			</view>
		</view>
		<!-- 菜单 -->
		<wd-cell-group border custom-class="menu-style">
			<wd-cell v-for="(_,index) in menu" :key="index" :title="_.title" is-link :to="_.to" >
				<i class="cell-icon" :class="'cell-icon'+index" slot="icon" ></i>
			</wd-cell>
		</wd-cell-group>
		<!-- 退出登录 -->
		<wd-button v-if="userStore.userId" block size="large" custom-class="submit-button" @click="handleLogout">退出登录</wd-button>
	</custom-layout>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		getCommissionInfo
	} from '@/api/user/index.js'
	import {
		useUserStore
	} from '@/store/index.js'

	// 用户仓库
	const userStore = useUserStore()
	// 菜单
	const menu = [{
			title: '完善信息',
			to: '/pages/user/info/index',
		},{
			title: '提现',
			to: '/pages/withdrawal/index/index',
		},
		{
			title: '佣金记录',
			to: '/pages/commission/index/index',
		},
		{
			title: '提现记录',
			to: '/pages/withdrawal/record/index',
		},
		{
			title: '关于',
			to: '/pages/withdrawal/index/index',
		}
	]
	// 佣金信息
	const commissionInfo = ref({})
	// 处理获取佣金信息
	const handleGetCommissionInfo = () => {
		uni.showLoading()
		const params = {
			wxUserId: userStore.userId
		}
		getCommissionInfo(params).then((data) => {
			commissionInfo.value = data
		}).catch((error) => {
			setTimeout(() => {
				uni.showToast({
					title: error,
					icon: 'error'
				})
			})
		}).finally(() => {
			uni.hideLoading()
		})
	}
	// 获取状态栏高度
	const statusBarHeight = ref(0)
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight || 0;
	// 退出登录
	const handleLogout = ()=>{
		userStore.logout()
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	// 立即登录
	const handleLogin = async () => {
		const res = await userStore.wxLogin()
		if(res.nickname) {
			uni.showToast({
				title:'登录成功',
				icon:'success'
			})
			setTimeout(()=>{
				uni.switchTab({
					url:'/pages/index/index'
				})
			},1000)
			
		} else {
			uni.reLaunch({
				url:'/pages/login/index'
			})
		}
	}
	// 监听用户id
	watch(() => userStore.userId, () => {
		if (userStore.userId) {
			// handleGetCommissionInfo()
			
		}
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	// 自定义布局
	:deep(.custom-layout) {
		background: linear-gradient(to bottom right, #d2e3ff 10%,#cfe5ff 16% ,#e3f3ff 30%, #f8f8f8 60%);

	}
	// 导航栏
	.navigation {
		// height: 120px;
		// line-height: 120px;
		margin-left: 40rpx;
		text {
			font-size: 20px;
			
		}
	}

	// 用户信息
	.user-info {
		padding: 0rpx 0 50rpx 0;
		margin-bottom: 50rpx;
		margin: 40rpx;
		display: flex;
		
		// overflow: hidden;
		// position: relative;
		// z-index: 0;

		// .cover {
		// 	width: 100%;
		// 	height: 100%;
		// 	filter: blur(10rpx);
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: -1;
		// }

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 4rpx solid #FFFFFF;
			margin-right: 20rpx;
		}
		.name-info {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.name {
				font-size: 30rpx;
				font-weight: bold;
				
			}
			.id {
				color: #6599ff;
				background-color: #ecefff;
				font-size: 26rpx;
				border-radius: 20rpx;
				padding: 2rpx 18rpx;
				display: flex;
				align-items: center;
			}
		}
		
	}

	// 佣金信息
	.commissionInfo {
		
		background: url('~@/static/image/my-commission/background.png')
		  no-repeat center;
		background-size: 100% 100%;
		margin: 40rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item {
			flex: 1 1 auto;
			text-align: center;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;

			&:not(:first-child) {
				border-left: 2rpx solid #FFFFFF;
			}
			.number {
				font-size: 50rpx;
			}
		}
	}

	// 菜单样式
	:deep(.menu-style) {
		margin: 40rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		
		.cell-icon {
			  display: block;
			  width: 20px;
			  height: 20px;
			  argin-top: 2px;
			  margin-right: 10px;
			  
		}
		.cell-icon0 {
			background: url('~@/static/image/my-component/finish.png')
			  no-repeat center;
			background-size: 100% 100%;
		}
		.cell-icon1 {
			background: url('~@/static/image/my-component/finish.png')
			  no-repeat center;
			background-size: 100% 100%;
		}
		.cell-icon2 {
			
			background: url('~@/static/image/my-component/money.png')
			  no-repeat center;
			background-size: 100% 100%;
		}
		.cell-icon3 {
			width: 22px;
			height: 16px;
			argin-top: 5px;
			background: url('~@/static/image/my-component/cash.png')
			  no-repeat center;
			background-size: 100% 100%;
		}
		.cell-icon4 {
			background: url('~@/static/image/my-component/about.png')
			  no-repeat center;
			background-size: 100% 100%;
		}
	}
	// 退出按钮
	:deep(.submit-button) {
		margin: 32rpx;
	}

</style>